<template>
	<div>
		<el-card>
      <el-form :inline="true" size="small">
        <el-form-item label="公司类型">
						<el-select v-model="companyList.companyLevel" placeholder="请选择公司类型" clearable>
							<el-option label="全部" value=""></el-option>
							<el-option label="临时" value="1"></el-option>
							<el-option label="孵化" value="2"></el-option>
							<el-option label="正式" value="3"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="公司名称">
						<el-input v-model="companyList.companyName" placeholder="请输入公司名称" prefix-icon="el-icon-search"
							@keyup.enter.native="getCompany" clearable></el-input>
					</el-form-item>
           <el-form-item>
                <el-button type="primary"
                           icon="el-icon-search"
                           @click="getCompany">查询</el-button>
            </el-form-item>
      </el-form>
			<el-form>
				<!-- <el-form-item>
					<el-button type="primary" @click="brandlForm()" size="small">新建公司</el-button>
				</el-form-item> -->
				<!-- table列表 下级公司列表 -->
				<el-form-item label="被服务的公司列表：">
					<el-table ref="singleTable" v-loading="loading" :data="tableData2"
						:header-cell-style="{ background: '#F4F4F5', color: '#606266' }" border style="width: 100%">
						<el-table-column label="序号" type="index" align="center" width="50">
						</el-table-column>
            <el-table-column label="公司级别" align="center" prop="createtime">
							<template slot-scope="scope">
                <span v-if="scope.row.companyLevel==2">全球</span>
                <span v-if="scope.row.companyLevel==2">省级</span>
                <span v-if="scope.row.companyLevel==3">市化</span>
                <span v-if="scope.row.companyLevel==4">县式</span>
							</template>
						</el-table-column>
            <el-table-column label="公司类型" align="center" prop="createtime">
							<template slot-scope="scope">
                <span v-if="scope.row.companyLevel==1">临时</span>
                <span v-if="scope.row.companyLevel==2">孵化</span>
                <span v-if="scope.row.companyLevel==3">正式</span>
							</template>
						</el-table-column>
						<el-table-column label="公司名称" align="center" width="300" prop="companyname">
						</el-table-column>
					
						<el-table-column align="center" label="操作">
							<template slot-scope="scope">
								<el-button type="primary" size="mini" @click="detailForm(scope.row)">公司信息
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>

				<!--分页模块start-->
				<el-pagination class="pagination-container" background :page-size="query.pageSize"
					@size-change="handleSizeChange" @current-change="handleCurrentChange"
					layout="total,sizes,prev, pager, next, jumper" :current-page="query.currentPage"
					:page-sizes="[10, 20, 30, 50]" :total="totalNumber"></el-pagination>

				<!-- 下级公司详情dialog -->
				<el-dialog :title="formMap[formName]" :visible.sync="detailVisible" :before-close="hideDetailForm"
					width="50%" top="5vh" v-dialogDrag :close-on-click-modal="false">
					<template slot="title">
						<div class="avue-crud__dialog__header">
							<span class="el-dialog__title">
								<span style="
                    display: inline-block;
                    background-color: #3478f5;
                    width: 3px;
                    height: 20px;
                    margin-right: 5px;
                    float: left;
                    margin-top: 2px;
                  "></span>
								{{ formMap[formName] }}
							</span>
						</div>
					</template>
					<el-card>
						<el-form>
							<el-form-item label-width="80px" label="基本信息" style="background: #e1e1e1" />
							<el-form-item label-width="40px">
								<el-form-item label-width="100px" label="发起合伙人："
									style="width: 100%; display: inline-block">
									<span>{{ launchcompany.companyname }}</span>
								</el-form-item>
								<el-form-item label-width="100px" label="首席合伙人："
									style="width: 50%; display: inline-block">
									<span>{{ launchcompany.chiefpartnername }}</span>
									<!-- <span v-if="company.isincubate==1">(孵化)</span>
                  <span v-if="company.isdisplacement==1">(顶替)</span> -->
								</el-form-item>
								<!-- <el-form-item style="margin-right: 20px; width: 30%; display: inline-block">
									<el-button type="primary" @click="changeCheif">首席变更</el-button>
								</el-form-item> -->
							</el-form-item>
							<el-form-item label-width="100px" label="高级合伙人" style="background: #e1e1e1" />
							<el-form-item>
								<el-table :data="seniorpartner" :header-cell-style="{
                    background: '#F4F4F5',
                    color: '#606266',
                  }" border>
									<el-table-column label="序号" type="index" width="80" align="center">
										<template scope="scope">
											<span>{{ scope.$index + 1 }}</span>
										</template>
									</el-table-column>
									<el-table-column prop="usernick" align="center" label="用户昵称" />
									<el-table-column prop="enterprisename" align="center" label="商城名称" />
									<el-table-column prop="usermobile" align="center" label="手机号" />
									<el-table-column prop="registrationnumber" align="center" label="营业执照" />
								</el-table>
							</el-form-item>

							<el-form-item label-width="100px" label="普通合伙人" style="background: #e1e1e1" />
							<el-form-item>
								<el-table :data="generalpartner" :header-cell-style="{
                    background: '#F4F4F5',
                    color: '#606266',
                  }" border>
									<el-table-column label="序号" type="index" width="80" align="center">
										<template scope="scope">
											<span>{{ scope.$index + 1 }}</span>
										</template>
									</el-table-column>
									<el-table-column prop="usernick" align="center" label="用户昵称" />
									<el-table-column prop="enterprisename" align="center" label="商城名称" />
									<el-table-column prop="usermobile" align="center" label="手机号" />
									<el-table-column prop="registrationnumber" align="center" label="营业执照" />
								</el-table>
							</el-form-item>
						</el-form>
					</el-card>
				</el-dialog>
				<!--首席变更申请弹框start-->
				<el-dialog :title="formMap[formName]" :visible.sync="brandVisible" :before-close="hideCrandlForm"
					width="50%" top="5vh" v-dialogDrag :close-on-click-modal="false">
					<template slot="title">
						<div class="avue-crud__dialog__header">
							<span class="el-dialog__title">
								<span style="
                    display: inline-block;
                    background-color: #3478f5;
                    width: 3px;
                    height: 20px;
                    margin-right: 5px;
                    float: left;
                    margin-top: 2px;
                  "></span>
								{{ formMap[formName] }}
							</span>
						</div>
					</template>
					<el-card>
						<el-table v-loading="loading" :data="changeBrandList"
							:header-cell-style="{ background: '#F4F4F5', color: '#606266' }" border>
							<el-table-column label="序号" type="index" width="60" align="center">
								<template scope="scope">
									<span>{{ scope.$index + 1 }}</span>
								</template>
							</el-table-column>
							<el-table-column label="商户ID" prop="userid" align="center" :show-overflow-tooltip="true" />
							<el-table-column label="公司名称" prop="companyname" align="center"
								:show-overflow-tooltip="true" />
							<el-table-column label="手机号" prop="mobile" align="center" :show-overflow-tooltip="true" />
							<el-table-column label="总业绩" prop="totalperformance" align="center"
								:show-overflow-tooltip="true" />
							<el-table-column label="是否已发起申请" prop="auditstatus" align="center"
								:show-overflow-tooltip="true">
								<template slot-scope="scope">
									<span v-if="scope.row.auditstatus == 0">（审核中）</span>
									<span v-if="scope.row.auditstatus == 1">（通过）</span>
									<span v-if="scope.row.auditstatus == 2">（驳回）</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button type="primary" size="mini" @click.native="applyForm(scope.row)">发起申请
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
					<span slot="footer" class="dialog-footer">
						<el-button @click="hideCrandlForm">取 消</el-button>
					</span>
				</el-dialog>
				<!--新建公司列表弹框start-->
				<el-dialog :title="formMap[formName]" :visible.sync="newsetVisible" :before-close="hideBrandlForm"
					width="50%" top="5vh" v-dialogDrag :close-on-click-modal="false">
					<template slot="title">
						<div class="avue-crud__dialog__header">
							<span class="el-dialog__title">
								<span style="
                    display: inline-block;
                    background-color: #3478f5;
                    width: 3px;
                    height: 20px;
                    margin-right: 5px;
                    float: left;
                    margin-top: 2px;
                  "></span>
								{{ formMap[formName] }}
							</span>
						</div>
					</template>
					<el-card>
						<el-table v-loading="loading" :data="newSetList"
							:header-cell-style="{ background: '#F4F4F5', color: '#606266' }" border>
							<el-table-column label="序号" type="index" width="60" align="center">
								<template scope="scope">
									<span>{{ scope.$index + 1 }}</span>
								</template>
							</el-table-column>
							<el-table-column label="商户ID" prop="userid" align="center" :show-overflow-tooltip="true" />
							<el-table-column label="公司名称" prop="companyname" align="center"
								:show-overflow-tooltip="true" />
							<el-table-column label="手机号" prop="mobile" align="center" :show-overflow-tooltip="true" />
							<el-table-column label="总业绩" prop="totalperformance" align="center"
								:show-overflow-tooltip="true" />
							<el-table-column label="是否已发起申请" prop="auditstatus" align="center"
								:show-overflow-tooltip="true">
								<template slot-scope="scope">
									<span v-if="scope.row.auditstatus == 0">（审核中）</span>
									<span v-if="scope.row.auditstatus == 1">（通过）</span>
									<span v-if="scope.row.auditstatus == 2">（驳回）</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button type="primary" size="mini" @click.native="applySetForm(scope.row)">发起申请
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
					<span slot="footer" class="dialog-footer">
						<el-button @click="hideBrandlForm">取 消</el-button>
					</span>
				</el-dialog>
				<!--发起申请弹框start-->
				<el-dialog :title="formMap[formName]" :visible.sync="applyVisible" :before-close="hideApplyForm"
					width="50%" top="5vh" v-dialogDrag :close-on-click-modal="false">
					<template slot="title">
						<div class="avue-crud__dialog__header">
							<span class="el-dialog__title">
								<span style="
                    display: inline-block;
                    background-color: #3478f5;
                    width: 3px;
                    height: 20px;
                    margin-right: 5px;
                    float: left;
                    margin-top: 2px;
                  "></span>
								{{ formMap[formName] }}
							</span>
						</div>
					</template>
					<el-card>
						<el-form label-width="140px">
							<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
								<el-form-item label="头像：" style="width: 30%; display: inline-block">
									<el-popover v-if="newSetData.companyurl" placement="right" trigger="hover">
										<img :src="newSetData.companyurl" style="width: 400px; border-radius: 3px" />
										<img slot="reference" :src="newSetData.companyurl" style="
                        max-height: 80px;
                        max-width: 50px;
                        border-radius: 5px;
                      " />
									</el-popover>
									<span v-else>-</span>
								</el-form-item>
							</el-form-item>
							<!-- 行政区划 -->

							<el-form-item label="行政区域：">
								<el-select v-model="province" placeholder="请选择省" disabled>
								</el-select>
								<el-select v-model="city" placeholder="请选择市" disabled>
								</el-select>
								<el-select v-model="countyList.areaname" @change="selectCounty(countyList.areaname)"
									:placeholder="country">
									<el-option v-for="item in countyList" :key="item.areaid" :label="item.areaname"
										:value="item.areaname"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
								<el-form-item label="商户ID：" style="width: 30%; display: inline-block">
									<input v-model="newSetData.userid" type="text" readonly />
								</el-form-item>
								<el-form-item label="公司名称："
									style="margin-left: 80px; width: 30%; display: inline-block">
									<input v-model="newSetData.cooperationbrand" type="text" readonly />
								</el-form-item>
							</el-form-item>
							<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
								<el-form-item label="手机号：" style="width: 30%; display: inline-block">
									<input v-model="newSetData.mobile" type="text" readonly />
								</el-form-item>
								<el-form-item label="总业绩：" style="margin-left: 80px; width: 30%; display: inline-block">
									<input v-model="newSetData.totalperformance" type="text" readonly />
								</el-form-item>
							</el-form-item>
						</el-form>
					</el-card>
					<span slot="footer" class="dialog-footer" style="text-align: center !important">
						<el-button type="primary" size="mini" @click="applySubmit">发起申请</el-button>
						<!-- <el-button @click="applySubmit ">发起申请</el-button> -->
					</span>
				</el-dialog>
				<!--发起申请弹框end-->
			</el-form>
		</el-card>
	</div>
</template>

<script>
	import {
		getCompany,
		postCompany,
		getApplyCeoWishList,
		applyChangeCEO,
		getNewCompanyCeoWishList,
		applyCreateCompany,
		areaList,
		getCity,
		getCounty,
	} from "../../../api/companyManager";
	export default {
		data() {
			return {
				province: "",
				city: "",
				provinceid: "", //根据对应的省获取的id
				cityid: "", //根据省id获取市级id
				country: "", //区域
				provinces: [], //省的列表
				citys: [], //市的列表
				countyList: [], //选择县级列表
				tableData: [], //本公司
				tableData2: [], //下级公司列表
				formercompanyid: null, //预变更首席的公司ID
				loading: false,
				companyList: {
					companyName: '',
					companyLevel: '',
				},
				brandVisible: false, //首席变更申请弹窗
				newsetVisible: false, //新建公司弹窗
				detailVisible: false, //详情弹窗
				applyVisible: false, //申请弹框
				totalNumber: 1, //分页总页数
				loading: true, //列表加载
				launchcompany: {},
				// company:{},
				seniorpartner: [],
				generalpartner: [],
				changeBrandList: [], //有意向公司的列表
				applyData: {}, //申请内容
				newSetList: [], //新建公司列表
				newSetData: {}, //新建公司申请内容
				query: {
					id: "",
					companyName: '',
					companyLevel: '',
				}, //首席变更id赋值
				formName: null,
				formMap: {
					detail: "被服务的公司详情",
					reject: "驳回",
					add: "新建品牌公司",
				},
			};
		},
		methods: {
			//获取列表
			getCompany() {
				this.loading = true;
				getCompany()
					.then((data) => {
						// console.log(data)
						if (data.code != 0) {
							this.$message.error(data.message);
							this.loading = false;
							return false;
						}
						// this.totalNumber =data.totalNumber
						//获取公司的列表
						const arr = [];
						arr.push(data.data);
						this.tableData = arr;
						this.formercompanyid = data.data.companyid; //新建公司id
						//获取下级公司列表
						this.tableData2 = data.data.nextLevelCompanyList || [];
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch((err) => {
						this.loading = false;
						this.tableData = [];
					});
			},
			//获取公司详情列表
			postCompany() {
				this.loading = true;
				let data = {
					companyid: this.query.id,
				};
				postCompany(data)
					.then((data) => {
						//  console.log(data)
						if (data.code != 0) {
							this.$message.error(data.message);
							this.loading = false;
							return false;
						}
						this.launchcompany = data.data.company || {};
						this.seniorpartner = data.data.seniorPartner || [];
						this.generalpartner = data.data.generalPartner || [];
						// this.changeBrandList = data.data.company
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch((err) => {
						this.loading = false;
						this.launchcompany = [];
						this.seniorpartner = [];
						this.generalpartner = [];
					});
			},

			//获取申请用户详情列表
			getApplyCeoWishList() {
				this.loading = true;
				let data = {
					companyid: this.query.id,
				};
				getApplyCeoWishList(data)
					.then((data) => {
						//  console.log(data)
						if (data.code != 0) {
							this.$message.error(data.message);
							this.loading = false;
							return false;
						}
						this.changeBrandList = data.data || [];
						// console.log(this.changeBrandList)
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch((err) => {
						this.loading = false;
						this.changeBrandList = [];
					});
			},

			//首席变更
			changeCheif() {
				this.brandVisible = true;
				this.getApplyCeoWishList();
			},

			//下级公司详情发起申请
			applyChangeCEO() {
				this.loading = true;
				//  console.log(this.formercompanyid)
				this.applyData.formercompanyid = this.query.id; //重新赋值申请变更的公司id
				let data = this.applyData; //点击哪一个变成哪一个
				// console.log(data)
				applyChangeCEO(data)
					.then((data) => {
						//  console.log(data)
						if (data.code != 0) {
							this.$message.error(data.message);
							this.loading = false;
							return false;
						} else {
							this.$message.success("恭喜您已申请变更");
							this.brandVisible = false;
							//  this.applyVisible=false
						}
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch((err) => {
						this.loading = false;
					});
			},

			//获取申请首席意愿用户(创建新公司)
			getNewCompanyCeoWishList() {
				this.loading = true;
				// console.log(this.formercompanyid)
				//市级公司id传送过去
				let data = {
					companyid: this.formercompanyid,
				};
				getNewCompanyCeoWishList(data)
					.then((data) => {
						//  console.log(data)
						if (data.code != 0) {
							this.$message.error(data.message);
							this.loading = false;
							return false;
						}
						this.newSetList = data.data || [];
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch((err) => {
						this.loading = false;
					});
			},
			//选择省市区的接口
			areaList() {
				//获取省
				areaList()
					.then((response) => {
						let that = this;
						// console.log(response.data)
						if (response.code != 0) {
							this.$message.error(response.message);
							return false;
						}
						this.provinces = response.data || [];
						this.provinces.find((v, i) => {
							if (that.province == v.areaname) {
								// console.log(that.province)
								that.provinceid = v.areaid;
								console.log(that.provinceid);
							}
							return;
						});
						this.getcity(); //调用市级接口
					})
					.catch((err) => {
						this.$message.error(err);
					});
			},

			//获取市
			getcity() {
				console.log(this.provinceid);
				getCity({
						provinceid: this.provinceid
					})
					.then((data) => {
						let that = this;
						that.citys = data.data || [];
						//  console.log(that.citys)
						that.citys.forEach((v, i) => {
							if (that.city == v.areaname) {
								that.cityid = v.areaid;
								console.log(that.cityid);
							}
							return;
						});
						console.log(this.cityid);
						this.getcounty(); //调用县级接口
					})
					.catch((err) => {
						this.$message.error(err);
					});
			},
			//获取县
			getcounty() {
				console.log(this.provinceid);
				console.log(this.cityid);
				let data = {
					provinceid: this.provinceid,
					cityid: this.cityid,
				};
				getCounty(data)
					.then((data) => {
						console.log(data); //获得县的数据
						console.log(this.country);

						this.countyList = data.data;
					})
					.catch((err) => {
						this.$message.error(err);
					});
			},

			// 选择县
			selectCounty(val) {
				console.log(val);
				this.country = val;
			},

			//新建公司的发起申请
			applySetForm(val) {
				console.log(val);
				//  console.log(val.intentionarea)
				let str = val.intentionarea; //对获取到的省市区进行处理
				let arr = str.split(",");
				this.province = arr[0]; //赋值给省
				this.city = arr[1]; //赋值给市
				this.country = arr[2]; //赋值给县
				this.newSetData = val;
				this.applyVisible = true;

				this.areaList(); //省
				// this.getcity()//市
			},

			//显示 查看弹框
			detailForm(row) {
				console.log(row);
				this.query.id = row.companyid; //首席变更的id获取，变成下级公司的id（取带谁）
				this.postCompany();
				if (row !== null) {
					// this.launchcompany = Object.assign({}, row);
					this.formName = "detail";
					this.detailVisible = true;
				}
			},
			// 隐藏详情弹框
			hideDetailForm() {
				// 更改值
				this.detailVisible = false;
				this.brandVisible = false;
				// this.launchcompany={};
			},
			//首席变更申请弹窗开启
			applyForm(val) {
				console.log(val);
				this.applyData = val;
				this.applyChangeCEO(); //调用提交接口
			},
			//申请弹窗关闭
			hideApplyForm() {
				this.applyVisible = !this.applyVisible;
				this.applyData = {};
			},
			//新建公司申请提交
			applySubmit() {
				// console.log(this.newSetData)
				//申请创建公司
				// console.log(this.province)
				// console.log(this.city)
				// console.log(this.country)
				let str = this.province + "," + this.city + "," + this.country;
				// console.log(str)
				this.newSetData.intentionarea = str; //拼接字符串传给接口
				let data = JSON.parse(JSON.stringify(this.newSetData));
				// console.log(data)
				applyCreateCompany(data)
					.then((data) => {
						// console.log(data)
						if (data.code != 0) {
							this.$message.error(data.message);
							return false;
						} else {
							this.$message.success("恭喜您已发起申请");
							this.applyVisible = false;
							this.newsetVisible = false;
						}
					})
					.catch((err) => {
						this.applyVisible = false;
						this.newsetVisible = false;
					});
			},
			//意向公司列表弹窗关闭
			hideBrandlForm() {
				this.newsetVisible = !this.newsetVisible;
				// this.intentionBrandList=[];
			},
			//首席变更窗口关闭
			hideCrandlForm() {
				this.brandVisible = !this.brandVisible;
			},

			//新建公司列表弹窗开启
			brandlForm() {
				this.newsetVisible = true;
				this.formName = "add";
				if ((this.formName = "add")) {
					this.getNewCompanyCeoWishList();
					this.changeBrandList = [];
				}
				// this.getIntentionBrandList();
			},
			/*点击页数*/
			handleCurrentChange(val) {
				this.query.currentPage = val;
				this.getCompany();
			},

			/*选择每页条数【10,20,30,40,50】*/
			handleSizeChange(val) {
				this.query.pageSize = val;
				this.getCompany();
			},

			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
		},
		mounted() {
			this.getCompany();
		},
	};
</script>
<style lang="scss" scoped>
	.baseinfo {
		font-size: 18px !important;
		background-color: #ccc;
	}

	.person {
		font-size: 18px !important;
		background-color: #ccc;
	}

	.baseperson {
		font-size: 18px !important;
		background-color: #ccc;
	}

	.el-dialog__title {
		font-size: 30px;
	}
</style>
